﻿@page "/tree-grid/column-template"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@using ej2_blazor_templatedata
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the usage of template columns in Tree Grid. In this sample, we have shown images in the Tree Grid columns.</p>
</SampleDescription>
<ActionDescription>
    <p>The Tree Grid provides a way to use a custom layout for each cell using the column template feature. The TreeGridcolumn <code>Template</code> sub component is used to insert the column template for the columns.</p>
    <p>In this demo, using column template, we have presented Employee Image column with Employee Photo.</p>
    <p>More information on the column template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/columns/#column-template'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid Height="315" DataSource="@TreeData" IdMapping="EmployeeID" ParentIdMapping="ParentId" TreeColumnIndex="0">
                <TreeGridColumns>
                    <TreeGridColumn Field="Name" HeaderText="Name" Width="160"></TreeGridColumn>
                    <TreeGridColumn HeaderText="Employee Image" Width="140">
                        <Template>
                            @{
                                var employee = (context as Employee);
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/{employee.FullName.ToLower()}.png")" alt="@employee.EmployeeID" />
                                </div>
                            }
                        </Template>
                    </TreeGridColumn>
                    <TreeGridColumn Field="DOB" HeaderText="DOB" Width="90" TextAlign=" Syncfusion.Blazor.Grids.TextAlign.Right" Type=ColumnType.Date Format="d"></TreeGridColumn>
                    <TreeGridColumn Field="Designation" HeaderText="Designation" Width="170"></TreeGridColumn>
                    <TreeGridColumn Field="EmpID" HeaderText="Employee ID" Width="120"></TreeGridColumn>
                    <TreeGridColumn Field="Country" HeaderText="Priority" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>


@code{

    public IEnumerable<Employee> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = Employee.GetTemplateData();
    }
}
